<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:skin="skin">
        <div class="box">
          <div class="boxTitle">标题</div>
          <div class="flexBox">
            <div class="inputFlex" ::style="{fontFamily: skinName1}">{{skinName1}}<span style="padding-left: 4px;">{{skinConfig1}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('1')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">正文</div>
          <div class="flexBox">
            <div class="inputFlex" :style="{fontFamily: skinName2}">{{skinName2}}<span style="padding-left: 4px;">{{skinConfig2}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('2')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="boxTitle">按钮</div>
          <div class="flexBox">
            <div class="inputFlex" :style="{fontFamily: skinName3}">{{skinName3}}<span style="padding-left: 4px;">{{skinConfig3}}</span></div>
            <div class="buttonFlex" @click="handleShowDialog('3')">
              <svg t="1608547338091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="24" height="24" style="vertical-align: middle;"><path d="M734.843 394.334 734.843 394.334 734.843 394.334l-91.1-91.1c-7.5-7.502-20.32-2.19-20.32 8.417l0 70.782c0 6.572-5.33 11.9-11.905 11.9L262.252 394.333c-6.573 0-11.902 5.33-11.902 11.9l0 31.907c0 6.577 5.328 11.9 11.902 11.9l499.566 0c10.605 0 15.91-12.817 8.415-20.32L734.843 394.334 734.843 394.334zM289.154 629.658 289.154 629.658 289.154 629.658l91.102 91.105c7.5 7.495 20.323 2.18 20.323-8.415l0-70.78c0-6.585 5.328-11.91 11.902-11.91l349.282 0c6.57 0 11.905-5.33 11.905-11.905l0-31.9c0-6.57-5.335-11.905-11.905-11.905L262.179 573.948c-10.607 0-15.915 12.815-8.415 20.32L289.154 629.658 289.154 629.658zM511.999 981.282c-258.767 0-469.289-210.515-469.289-469.281 0-258.769 210.522-469.291 469.289-469.291 258.769 0 469.294 210.522 469.294 469.291C981.292 770.768 770.768 981.282 511.999 981.282zM511.999 81.227c-237.529 0-430.771 193.24-430.771 430.774 0 237.522 193.24 430.766 430.771 430.766 237.529 0 430.769-193.245 430.769-430.766C942.768 274.467 749.523 81.227 511.999 81.227z" p-id="4234" fill="#A8B3D0"></path></svg>
            </div>
          </div>
        </div>

      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
    <el-dialog title="字体选择" :visible.sync="dialogVisible" :append-to-body="true">
      <div class="search-list">
        <el-form ref="form" class="search-table-form" :model="fontList" label-width="90px" size="small"
                 style="background: #fff;padding: 10px">
          <div style="display: flex;align-items: center">
            <el-form-item label="字体名：" style="margin-bottom: 0;margin-right: 20px">
              <el-input v-model="fontList.seriesName" placeholder="请输入" style="width: 100%"></el-input>
            </el-form-item>
            <div style="display: flex;align-items: center">
              <el-button size="small" type="primary" @click="handleSearch">搜索查询</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <el-table :data="tableData" ref="listTable" style="width: 100%" stripe
                highlight-current-row
                :cell-style="setCellStyle"
                @row-click="getDefaultFontMsg">
        <el-table-column label="" width="50px">
          <template slot-scope="scope">
            <el-radio class="no-label"
                      v-model="typeName"
                      :label="scope.row.name"
                      :key="'radio' + scope.$index"
                      @change="currentRow(scope.$index, scope.row)">{{scope.row.name}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="字体名称"/>
        <el-table-column prop="variants" header-align="center" align="center" label="配置">
          <template slot-scope="scope">
            <el-select v-model="scope.row.configurationChecked"
                       @change="getDefaultFontMsg(scope.row,scope.$index)"
                       placeholder="请选择"
                       value-key="index">
              <el-option v-for="(item,index) in scope.row.variants"
                         :key="index"
                         :label="item.styleName"
                         :value="item.styleName"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProductList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {commonFont} from '@/api/theme';

import {deepClone} from '@/utils/utils';
import font from '@/utils/font';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];

export default {
    name: 'paymentForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        formData: {
            handler (newVal, oldVal) {
                this.setData();
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            pageCount: 0,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            activeNames: [],

            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',

            skinName1: '',
            skinName2: '',
            skinName3: '',
            skinName4: '',
            skinConfig1: '',
            skinConfig2: '',
            skinConfig3: '',
            skinConfig4: '',
            skinStyle1: {}, // 这里字体展示样式还没完善
            skinStyle2: {},
            skinStyle3: {},
            skinStyle4: {},
            fontList: {
                seriesName: ''
            },
            dialogVisible: false,
            tableData: [],
            tableDataBase: [],
            typeName: '',
            typeChecked: '',
            typeHandle: '',
            typeIndex: '1',
            typeStyle: '',
            sections: [
                {
                    title: '结账页样式',
                    formDesc: {
                        'checkout_page_type': {
                            type: 'select',
                            label: '类型',
                            options: [
                                {text: '标准结账页', value: 'two_step'},
                                {text: '单页结账', value: 'one_step'}
                            ]
                        }
                    }
                },
                {
                    // 分区标题
                    title: 'Banner设置',
                    // 分区表单项
                    // 和group不同，仅将vue-ele-form的formDesc放入section中
                    formDesc: {
                        'checkout_pc_image': {
                            label: 'PC端图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: 'PC端图片',
                                desc: '如果您选择自适应，建议尺寸（宽*高）：1920*667px'
                            }
                        },
                        'checkout_mobile_image': {
                            label: '移动端图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: '移动端图片',
                                desc: '如果您选择自适应，建议尺寸（宽*高）：750*918px'
                            }
                        },
                        'checkout_image_height': {
                            type: 'select',
                            label: '图片高度',
                            options: [
                                {text: '保留原尺寸', value: 'normal'},
                                {text: '大', value: 'large'},
                                {text: '小', value: 'small'}
                            ]
                        },
                        'checkout_alignment': {
                            type: 'select',
                            label: '图片截取位置',
                            options: [
                                {text: '上', value: 'top'},
                                {text: '中', value: 'center'},
                                {text: '下', value: 'bottom'}
                            ]
                        },
                        'checkout_is_full_width': {
                            type: 'switch',
                            break: true,
                            label: '宽度铺满屏幕'
                        },
                        'checkout_show_bottom_margin': {
                            type: 'switch',
                            break: true,
                            label: '显示下间距'
                        }
                    }
                },
                {
                    title: 'logo图片',
                    formDesc: {
                        'checkout_logo_image': {
                            label: 'logo图片',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: 'logo图片',
                                desc: '1建议尺寸：300*45，减少左右边距留白'
                            }
                        },
                        'checkout_logo_size': {
                            type: 'select',
                            label: 'Logo尺寸',
                            options: [
                                {text: '大', value: 'large'},
                                {text: '中', value: 'medium'},
                                {text: '小', value: 'small'}

                            ]
                        },
                        'checkout_logo_position': {
                            type: 'select',
                            label: 'Logo位置',
                            options: [
                                {text: '左', value: 'left'},
                                {text: '中', value: 'center'},
                                {text: '右', value: 'right'}
                            ]
                        }
                    }
                },
                // {
                //     title: '付款信息背景图',
                //     formDesc: {
                //         'checkout_payment_background_image': {
                //             label: '',
                //             type: 'ele-form-upload-file',
                //             attrs: {
                //                 desc: '根据图片大小进行拉抻或平铺图像'
                //             }
                //         },
                //         'checkout_payment_background_color': {
                //             type: 'color',
                //             label: '背景颜色'
                //         },
                //         'checkout_input_background_color': {
                //             type: 'select',
                //             label: '输入框背景',
                //             options: [
                //                 {text: '透明', value: 'transparent'},
                //                 {text: '白色', value: '#ffffff'}
                //             ]
                //         }
                //     }
                // },
                // {
                //     title: '订单摘要背景',
                //     formDesc: {
                //         'checkout_order_background_image': {
                //             label: '',
                //             type: 'ele-form-upload-file',
                //             attrs: {
                //                 desc: '根据图片大小进行拉抻或平铺图像'
                //             }
                //         },
                //         'checkout_order_background_color': {
                //             type: 'color',
                //             label: '背景颜色'
                //         }
                //     }
                // },
                {
                    title: '订单详情区域',
                    formDesc: {
                        'checkout_recommend_image': {
                            label: '',
                            type: 'ele-form-upload-plus-file',
                            attrs: {
                                title: '',
                                desc: '建议尺寸（宽*高）：460*180px'
                            }
                        },
                        'checkout_recommend_image_link': {
                            type: 'ele-form-custom-select',
                            label: '图片链接'
                        }
                    }
                },
                {
                    title: '字体类型',
                    formDesc: {
                        skin: {}
                    }
                },
                {
                    title: '颜色设置',
                    formDesc: {
                        'checkout_order_background_color': {
                            type: 'color',
                            break: true,
                            label: '订单摘要背景',
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'checkout_button_background_color': {
                            type: 'color',
                            label: '按钮背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'checkout_button_text': {
                            type: 'color',
                            label: '按钮文案',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'checkout_error_color': {
                            type: 'color',
                            label: '报错消息',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'checkout_focus_color': {
                            type: 'color',
                            label: '强调消息',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                }

            ]
        };
    },
    methods: {
        addPic () {
            this.formData.blocks.push({
                button_link: '',
                alignment: 'top',
                button_bg_color: '#FFFFFF',
                button_label: 'Learn More11',
                button_text_color: '#000000',
                mobile_src: '',
                opacity: 25,
                src: '',
                sub_title: 'Tell your brand\'s story through  images',
                text_color: '#FFFFFF',
                text_position: 'center_left',
                title: 'Image Slide',
                url: ''
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        initData () {
            this.loading = true;
            // commonFont().then(res => {
            this.tableData = font.data;
            console.log(this.tableData);
            const fonts = [];
            this.tableData.map(cc => cc.variants).forEach(dd => dd.map(ee => this.setFontFace(ee.details['font_face'])));
            this.tableDataBase = deepClone(font.data);
            this.handleShowDefaultCheckedList();
            this.loading = false;
        // }).catch((e) => {
        //     this.loading = false;
        // });
        },
        setFontFace (data) {
            const ele = document.createElement('div');
            const style = `<style>${data}</style>`;
            ele.innerHTML = style;
            document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild);
        },
        handleShowDefaultCheckedList () {
            for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].configurationChecked = this.tableData[i].variants[0].styleName;
                this.tableData[i].styleFonts = this.tableData[i].variants[0].details.font_face;

                for (let j = 0; j < this.tableData[i].variants.length; j++) {
                    if (this.tableData[i].variants[j].handle === this.formData.checkout_heading_fontfamily) {
                        this.skinName1 = this.tableData[i].variants[j].name; // 默认右侧栏的字和样式
                        this.skinConfig1 = this.tableData[i].variants[j].styleName;
                        this.skinStyle1 = this.tableData[i].variants[j].details.font_face;
                    }
                    if (this.tableData[i].variants[j].handle === this.formData.checkout_body_fontfamily) {
                        this.skinName2 = this.tableData[i].variants[j].name;
                        this.skinConfig2 = this.tableData[i].variants[j].styleName;
                        this.skinStyle2 = this.tableData[i].variants[j].details.font_face;
                    }
                    if (this.tableData[i].variants[j].handle === this.formData.checkout_button_fontfamily) {
                        this.skinName3 = this.tableData[i].variants[j].name;
                        this.skinConfig3 = this.tableData[i].variants[j].styleName;
                        this.skinStyle3 = this.tableData[i].variants[j].details.font_face;
                    }
                }
            }
        },
        handleShowDialog (index) {
            console.log(index);
            this.typeIndex = index;
            if (index === '1') {
                this.typeName = this.skinName1;
            } else if (index === '2') {
                this.typeName = this.skinName2;
            } else if (index === '3') {
                this.typeName = this.skinName3;
            }
            this.dialogVisible = true;
        },
        saveProductList () {
            this[`skinName${this.typeIndex}`] = this.typeName;
            this[`skinConfig${this.typeIndex}`] = this.typeChecked;
            this[`skinStyle${this.typeIndex}`] = this.typeStyle;

            if (this.typeIndex === '1') {
                this.formData.checkout_heading_fontfamily = this.typeHandle;
            }
            if (this.typeIndex === '2') {
                this.formData.checkout_body_fontfamily = this.typeHandle;
            }
            if (this.typeIndex === '3') {
                this.formData.checkout_button_fontfamily = this.typeHandle;
            }
            this.setData();
            this.dialogVisible = false;
        },
        currentRow (index, row) {
            this.typeName = row.name;
        },
        setCellStyle ({rowIndex, columnIndex}) {
            if (columnIndex === 1) {
                return `font-family: ${this.tableData[rowIndex].name};
                ${this.tableData[rowIndex].styleFonts}`;
            }
        },
        getDefaultFontMsg (row, index) {
            let i = this.tableData.findIndex((item) => item === row);
            let j = row.variants.filter(function (item) { return item.styleName === row.configurationChecked; })[0];
            this.tableData[i].styleFonts = j.details.font_face;
            this.setCellStyle(i, 1);
            row.variants = [...row.variants];
            this.typeName = row.name;
            this.typeChecked = row.configurationChecked;
            this.typeHandle = j.handle;
            this.typeStyle = row.variants.find(res => res.styleName === this.typeChecked).details.font_face;
        },
        handleSubmit (data) {
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        },
        handleSearch () {
            let that = this;
            this.tableData = this.tableDataBase;
            this.tableData = this.tableData.filter(function (item) { return item.name.indexOf(that.fontList.seriesName) !== -1; });
            this.handleShowDefaultCheckedList();
        },
        handleRest () {
            this.formParams = {
                name: '',
                page: 1,
                pageSize: 20,
                status: 'unfinished'
            };
            this.initData();
        }
    },
    created () {
        this.initData();
    },
    mounted () {
        if (!this.formData.checkout_page_type) {
            this.$set(this.formData, 'checkout_page_type', 'two_step');
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}
.editForm{
  margin-bottom: 10px;
  .form-item{
    margin-top: 10px;
    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }
  ::v-deep .el-collapse-item__content{
    border: 1px solid #d8deec;
    border-top:0;
    padding-left: 10px;
  }
}
.addBtn{
  width: 100%;
}
.title{
  width: 100%;
  padding: 20px;
  background: #f6f7f9;
}
p{
  color: #606266;
  font-size: 14px;
  padding: 10px 0 5px 20px;
}

.box {
  height: 94px;
  .boxTitle {
    height: 42px;
  }
  .flexBox {
    width: 248px;
    height: 42px;
    display: flex;
    border-radius: 2px;
    background-color: #eef0f2;
    padding: 0 10px;
    .inputFlex {
      flex: 5;
    }
    .buttonFlex {
      flex: 1;
    }
  }
}
</style>
